<template>
  <div style="padding: 14px 14px 0">
    <RouteTitle isBack />
    <a-row class="content">
      <a-form layout="vertical">
        <a-form-item label="个人昵称" v-bind="validateInfos.nickname">
          <a-input
            size="large"
            :disabled="!isTeamLeader"
            v-model:value="modelRef.nickname"
            placeholder="请输入个人昵称"
            style="width: 500px"
          />
        </a-form-item>
        <a-form-item
          label="个人LOGO"
          v-bind="validateInfos.avatar"
          extra="建议尺寸200*200，图片不大于500kb"
        >
          <a-upload
            size="large"
            :action="$utils.imgAction"
            :headers="{ 'org-token': $store.getters.token }"
            v-model:file-list="logoList"
            @change="handleLogoUpload"
            :multiple="true"
            name="image"
            :data="{ dir: 'work_ai' }"
            accept="image/*"
            list-type="picture-card"
          >
            <div v-if="!logoList.length">
              <PlusOutlined />
              <div>上传LOGO</div>
            </div>
          </a-upload>
        </a-form-item>
      </a-form>
      <a-col
        :span="24"
        style="
          border-top: 1px solid #efeff5;
          padding-top: 20px;
          padding-left: 40px;
        "
      >
        <a-button
          type="primary"
          size="large"
          style="border: none; border-radius: 6px"
          @click="submitClick"
        >
          确定
        </a-button>
      </a-col>
    </a-row>
  </div>
</template>

<script>
import { defineComponent, reactive, toRefs, computed, watch } from "vue";
import { PlusOutlined } from "@ant-design/icons-vue";
import { Form, message } from "ant-design-vue";
import store from "../../../store";
import request from "../../../common/utils/request";
import { useTeam } from "../../../hooks/team";

const useForm = Form.useForm;

export default defineComponent({
  name: "Userinfo",
  components: { PlusOutlined },
  setup() {
    const userInfo = computed(() => {
      return store.getters.userInfo;
    });

    const { currentTeam } = useTeam();

    const isTeamLeader = computed(() => currentTeam.value?.can_edit);

    watch(
      () => isTeamLeader.value,
      (val) => {
        if (!val) {
          modelRef.nickname = userInfo.value.nickname;
        }
      }
    );

    const state = reactive({
      count: 0,
      logoList: [
        {
          url: userInfo.value.avatar,
        },
      ],
    });

    const modelRef = reactive({
      avatar: userInfo.value.avatar,
      nickname: userInfo.value.nickname,
    });
    const rulesRef = reactive({
      avatar: [
        {
          required: true,
          message: "请上传LOGO",
        },
      ],
      nickname: [
        {
          required: true,
          message: "请输入个人昵称",
        },
        {
          max: 8,
          message: "仅允许输入长度为8个字符",
        },
      ],
    });
    const { resetFields, validate, validateInfos } = useForm(
      modelRef,
      rulesRef
    );

    const handleLogoUpload = (info) => {
      let resFileList = [...info.fileList];
      if (resFileList.length) {
        resFileList.map((file, index) => {
          if (file.response) {
            if (file.response.code == 1000) {
              file.url = file.response.data.fileUrl;
            } else {
              message.warning(file.response.msg);
              resFileList.splice(index, 1);
            }
          }
        });
      }
      state.logoList = resFileList;
      if (state.logoList.length) {
        modelRef.avatar = state.logoList[0].url;
      } else {
        modelRef.avatar = "";
      }
    };

    const submitClick = () => {
      validate().then(() => {
        let params = {};
        for (let key in modelRef) {
          params[key] = modelRef[key];
        }
        request
          .put("/work_ai", "/user/info", {
            ...params,
          })
          .then((res) => {
            if (res?.code && res?.code != 1000) return

            store.dispatch("SetUserInfo", null).then(() => {
              message.success("保存成功");
              store.dispatch("GetUserInfo");
            });
          });
      });
    };

    return {
      ...toRefs(state),
      validateInfos,
      resetFields,
      modelRef,
      handleLogoUpload,
      submitClick,
      isTeamLeader,
    };
  },
});
</script>

<style lang="less" scoped>
.content {
  width: 100%;
  margin-top: 20px;
  padding: 20px;
  border: 1px solid #f0efef;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.4);
}
</style>
